<script>
import { getOrderShelfApi, ShelfApi } from '@/api/order/orderShelf'

export default {
  name: 'ordershelf',
  data() {
    return {
      search: '',
      tableData: [], // 表格数据
    }
  },
  methods: {
    // 查询表格数据
    getData() {
      if(this.search !== '') {
        getOrderShelfApi(this.search).then(res => {
          this.tableData = res.data
        }).catch(() => {
          this.tableData = []
        })
      } else {
        this.$message.warning('搜索条件不可为空!')
      }
    },
    // 下架
    offSelf(data) {
      this.$confirm('确认下架?', '下架', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ShelfApi(data.orderId).then(res => {
          this.$message.success('下架失成功!')
        }).catch(() => {
          this.$message.error('下架失败!')
        })
      })
    },
    // 打单
    intimidate(data) {
      this.$confirm('确认下架?', '下架', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      })
    }
  }
}
</script>

<template>
  <div>
    <div class="flex items-center my-3">
      <span class="w-[70px] text-xs pr-3">订单号: </span>
      <el-input v-model="search" clearable placeholder="请输入订单号" />
      <el-button type="primary" @click="getData" class="ml-3">查询</el-button>
    </div>
    <div>
      <el-table :data="tableData" class="w-full">
        <el-table-column prop="userName" label="快递单号" />
        <el-table-column prop="arrivalTime" label="存放库位" />
        <el-table-column prop="cargoName" label="货物名称" />
        <el-table-column prop="courierNumber" label="订单识别号" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="success" @click="offSelf(scope.row)">确认下架</el-button>
            <!--<el-table-column prop="courierNumber" @clicl="intimidate" label="打单" />-->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
